<template>
    <div class="btn-box">
        <el-button @click="btn1(item)" v-for="item in 4" :key="item">{{ item }}a</el-button>

        <br />

        <el-button @click="btn1(item.id)" :class="item.class" v-for="item in btn" :key="'dd' + item.id">{{ item.id }}</el-button>
    </div>
</template>

<script>
import w from "./a"
console.log(w, "as")
export default {
  data() {
    return {
      btn: [
        { id: 1, class: "blue" },
        { id: 2, class: "blue" },
        { id: 3, class: "blue" },
        { id: 4, class: "blue" }
      ]
    }
  },
  methods: {
    btn1(id) {
      this.btn.map((res) => {
        if (res.id === id) {
          res["class"] = "red"
        } else {
          res["class"] = "blue"
        }
      })
    }
  },
  created() {
    console.log(w)
  }
}
</script>

<style lang="scss">
.btn-box {
    .blue {
        span {
            color: black;
        }
    }
    .red {
        span {
            color: red;
        }
    }
}
</style>
